
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>5.3.&nbsp;&#26696;&#20363;&#65306;Ain't It Readable [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;5&nbsp;&#31456;&nbsp;&#23454;&#20363;&#25945;&#23398;">
      <link rel="prev" href="bloglinesautoload.html" title="5.2.&nbsp;&#26696;&#20363;&#65306;Bloglines Autoload">
      <link rel="next" href="offsiteblank.html" title="5.4.&nbsp;&#26696;&#20363;&#65306;Offsite Blank">
   </head>
   <body id="diveintogreasemonkey-org" class="casestudy-aintitreadable">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#23454;&#20363;&#25945;&#23398;</a> &#8594; <span class="thispage">&#26696;&#20363;&#65306;Ain't It Readable</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="casestudy.aintitreadable" class="skip" href="#casestudy.aintitreadable" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 5.3.&nbsp;&#26696;&#20363;&#65306;Ain't It Readable
                        </h2>
                     </div>
                     <div>
                        <h3 class="subtitle">&#35206;&#30422;&#39029;&#38754;&#26679;&#24335;</h3>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>
                              <a href="http://aint-it-cool-news.com/">Ain't It Cool News</a> &#26159;&#19968;&#23478;&#33268;&#21147;&#20110;&#23089;&#20048;&#26032;&#38395;&#25253;&#36947;&#26041;&#38754;&#30340;&#31449;&#28857;&#12290;&#25105;&#24456;&#21916;&#27426;&#36825;&#20010;&#31449;&#28857;&#12290;&#20294;&#26159;&#65292;&#25105;&#23545;&#32593;&#31449;&#30340;&#22806;&#35266;&#19981;&#22826;&#28385;&#24847;&#65292;&#27599;&#20010;&#26032;&#38395;&#26631;&#39064;&#23383;&#20307;&#37117;&#22826;&#31895;&#22823;&#20102;&#65292;&#32780;&#19988;&#22312;&#40736;&#26631;&#31227;&#36807;&#26102;&#36824;&#20250;&#25913;&#21464;&#39068;&#33394;&#12290;&#25152;&#20197;&#65292;&#25105;&#20889;&#20102;&#19968;&#20010;&#29992;&#25143;&#33050;&#26412;&#26469;&#25913;&#21464;&#25105;&#19981;&#21916;&#27426;&#30340;&#26679;&#24335;&#12290;
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="example"><a name="example.casestudy.aintitreadable" class="skip" href="#example.casestudy.aintitreadable" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;5.3.&nbsp;
                     <a href="http://www.firefox.net.cn/dig/download/aintitreadable.user.js" title="Download Ain't It Readable">
                        <code class="filename">aintitreadable.user.js</code>
                        </a>
                     
                  </h3><pre class="programlisting ">// ==UserScript==
// @name          Ain't It Readable
// @namespace     http://diveintogreasemonkey.org/download/
// @description   change style on aint-it-cool-news.com
// @include       http://aint-it-cool-news.com/*
// @include       http://*.aint-it-cool-news.com/*
// ==/UserScript==

function addGlobalStyle(css) {
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
}

addGlobalStyle(
	'h1, h2, h3, h4 {' +
	'  font-size: 12px ! important;' +
	'  line-height: 14px ! important;' +
	'  font-weight: normal ! important;' +
	'}' +
	'h1:hover, h2:hover, h3:hover, h4:hover {' +
	'  background-color: inherit ! important;' +
	'  color: inherit ! important;' +
	'}');</pre></div>
               <p>&#36825;&#20010;&#29992;&#25143;&#33050;&#26412;&#21313;&#20998;&#31616;&#21333;&#12290;&#39318;&#20808;&#65292;&#25105;&#23450;&#20041;&#20102;&#19968;&#20010;&#20989;&#25968;&#65292;&#21487;&#20197;&#25226;&#20219;&#24847; CSS &#28155;&#21040;&#39029;&#38754;&#20013;&#12290;&#26377;&#20851;&#27492;&#20989;&#25968;&#30340;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">&#28155;&#21152; CSS &#26679;&#24335;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">function addGlobalStyle(css) {
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
}</pre></div>
               <p>&#25509;&#30528;&#65292;&#25105;&#35843;&#29992;&#36825;&#20010;&#20989;&#25968;&#26469;&#25226; CSS &#21152;&#21040;&#39029;&#38754;&#20013;&#65306;&#25226;&#26631;&#39064;&#21464;&#23567;&#19968;&#28857;&#65292;&#19981;&#37027;&#20040;&#31895;&#65292;&#24182;&#19988;&#21462;&#28040;&#20102;&#24403;&#40736;&#26631;&#31227;&#36807;&#26102;&#39068;&#33394;&#30340;&#21464;&#21270;&#12290;&#22312;&#36825;&#20010;&#26696;&#20363;&#37324;&#65292;&#39029;&#38754;&#23545;&#20854;&#20013;&#27599;&#19968;&#28857;&#37117;&#23450;&#20041;&#20102;&#26679;&#24335;&#35268;&#21017;&#65292;&#25152;&#20197;&#25105;&#29992; <code class="constant">! important</code> &#20851;&#38190;&#23383;&#65292;&#20197;&#20445;&#35777;&#25105;&#30340;&#26679;&#24335;&#35268;&#21017;&#33021;&#26367;&#25442;&#25481;&#39029;&#38754;&#21407;&#26377;&#30340;&#35268;&#21017;&#12290;
               </p>
               <p>&#27880;&#37322;&#65306;&#36825;&#20010;&#20989;&#25968;&#21482;&#26377;&#19968;&#20010;&#21442;&#25968;&#65306;&#21253;&#21547;&#26032;&#22686;&#30340;&#26679;&#24335;&#35268;&#21017;&#30340;&#23383;&#31526;&#20018;&#12290;&#25105;&#25226;&#23383;&#31526;&#20018;&#25490;&#25104;&#23481;&#26131;&#38405;&#35835;&#30340;&#26684;&#24335;&#65292;&#20294;&#26159;&#23427;&#20173;&#28982;&#21482;&#26159;&#20010;&#23383;&#31526;&#20018;&#12290;</p>
               <div class="informalexample"><pre class="programlisting ">addGlobalStyle(
	'h1, h2, h3, h4 {' +
	'  font-size: 12px ! important;' +
	'  line-height: 14px ! important;' +
	'  font-weight: normal ! important;' +
	'}' +
	'h1:hover, h2:hover, h3:hover, h4:hover {' +
	'  background-color: inherit ! important;' +
	'  color: inherit ! important;' +
	'}');</pre></div>
               <div class="download">
                  <h3>&#19979;&#36733;</h3>
                  <ul>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/aintitreadable.user.js">
                           <code class="filename">aintitreadable.user.js</code>
                           </a>
                        
                     </li>
                  </ul>
               </div>
               <div class="seealso">
                  <h3>&#21442;&#35265;</h3>
                  <ul>
                     <li>
                        <a href="../patterns/add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">&#28155;&#21152; CSS &#26679;&#24335;</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="bloglinesautoload.html">&#26696;&#20363;&#65306;Bloglines Autoload</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="offsiteblank.html">&#26696;&#20363;&#65306;Offsite Blank</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>